<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/brutusin-json-forms.min.css') }}"/>
	<script src="{{ url_for('static', filename='js/brutusin-json-forms.min.js') }}"></script>
	<script src="{{ url_for('static', filename='js/brutusin-json-forms-bootstrap.min.js') }}"></script>
	<title>Web App Config</title>
	</head>

	<body>
		<div class="py-5">
			<div class="container">
				<div class="row">
					<div class="col-md-1"></div>
					<div id="container" class="col-md-8"></div>
					<div class="col-md-1"></div>
			    </div>
				<div class="row">
					<div class="col-md-1"></div>
					<div class="col-md-8">
						<button type="button" class="btn btn-primary btn-block" onclick="submit();">Submit</button>
					</div>
					<div class="col-md-1"></div>
			    </div>
			</div>
		</div>

	</body>
</html>

<script>
var schema = {
	"type": "object",
	"properties": {
		"TOKEN": {
			"type": "string"
		},
		"PORT": {
			"type": "integer"
		},
		"ROOT_PATH": {
			"type": "string"
		},
		"RECOMMEND_TYPE_COUNT": {
			"type": "integer"
		},
		"TMP_DIR": {
			"type": "string"
		},
		"DESKEW_LIMIT": {
			"type": "integer"
		},
		"DESKEW_NO_BIAS": {
			"type": "boolean"
		},
		"USE_DESKEW": {
			"type": "boolean"
		},
		"USE_SLICE_DESKEW": {
			"type": "boolean"
		},
		"USE_CLEANER": {
			"type": "boolean"
		},
		"EXT_DOCUMENT_LAYOUT_BRANCH": {
			"type": "boolean"
		},

		"DOCUMENT_CLF": {
			"type": "object",
			"properties": {
				"MODEL": {
					"type": "string"
				},
				"LABELS": {
					"type": "string"
				}
			}
		},
		"LAYOUT_CLF": {
			"type": "object",
			"properties": {
				"MODEL": {
					"type": "string"
				},
				"LABELS": {
					"type": "string"
				}
			}
		},
		"TYPE_CLF": {
			"type": "object",
			"properties": {
				"MODEL": {
					"type": "string"
				},
				"LABELS": {
					"type": "string"
				}
			}
		},
		"TEXTDESKEW_MODEL": {
			"type": "string"
		},
		"AREA_DETECT_MODELS_DIR": {
			"type": "string"
		},


		"AREA_DETECT_BRANCH": {
			"type": "object",
			"properties": {
				"FRONT_COVER": {
					"type": "string"
				},
				"NON_DOCUMENT": {
					"type": "string"
				},
				"NON_TEXT_IMAGE": {
					"type": "string"
				}
			}
		},


		"AREA_DETECT_MODEL_DICT": {
			"type": "object",
			"additionalProperties": {
				"type": "string"
			}
		},
		"AREA_DETECT_SLICE_MODEL_DICT": {
			"type": "object",
			"additionalProperties": {
				"type": "string"
			}
		},
		"AREA_DETECT_LABELS_DICT": {
			"type": "object",
			"additionalProperties": {
				"type": "array",
				"items": {
					"type": "string"
				}
			}
		},

		"FILTER_SIZE": {
			"type": "array",
			"items": {
				"type": "number"
			}
		},

		"RECALL_MODELS_DIR": {
			"type": "string"
		},
		"CHI_SIM": {
			"type": "string"
		},
		"RECALL": {
			"type": "object",
			"additionalProperties": {
				"type": "string"
			}
		}
	}

}

var config_str = '{{ Args.config_str|safe }}';
var config_obj = JSON.parse(config_str);

var BrutusinForms = brutusin["json-forms"];
var bf = BrutusinForms.create(schema);
container = document.getElementById('container');
bf.render(container, config_obj);

function submit() {
	var request = new XMLHttpRequest();
	request.onreadystatechange = function () {
		if (request.readyState === 4) {
			if (request.status === 200) {
				container.innerHTML = "";
				bf.render(container, JSON.parse(request.responseText));
			} else {
				return alert(request.status);
			}
		}
	}

	request.open("POST", "{{url_for('setConfig', token=Args.token)}}");
	request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
	request.send(JSON.stringify(bf.getData()));
}
</script>
